<template>
    <el-dialog title="拆提放行" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" class="search-form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="船名/航次：" prop="containerId">
                        <!--<el-input v-model="form.ch"></el-input>-->
                        {{ form.shipName }}/{{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
            <el-table-column prop="devanType" label="放行类型"  min-width="130">
                <template slot-scope="scope">
                    {{ scope.row.devanType | _filterReleaseType }}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="120"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="120"></el-table-column>
            <el-table-column prop="isWork" label="拆箱作业"  min-width="120"></el-table-column>
        </el-table>
        <el-form :inline="true" :model="form" class="search-form" label-width="120px" v-if="list.length>0">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="合计：">
                        20*F {{ tf }} --- 40*F {{ ff }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="结算方式：" prop="accountWay">
                        {{ form.accountWay | _filterSettlementType }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算单位：" prop="accountUnit">
                        {{ form.accountUnit }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="form.accountWay==='C'">
                <el-col :span="24">
                    <el-form-item label="付费金额：">
                        {{ form.accountFee }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="放行人：" prop="passUser">
                        {{ form.passUser }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="放行时间：" prop="passTime">
                        {{ form.passTime }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>

    export default {
        name: "feeForm",
        components: {
        },
        data() {
            return {
                dialogForm: false,
                selectForm: false,
                form: {},
                rules: {},
                list: [],
                ch: '',
                portName: ''
            }
        },
        methods: {
        },
        computed: {
            // 20*F
            tf() {
                let tf = this.list.filter(f => {
                    return f.ef === 'F' && f.containerSize === '20'
                })
                return tf.length
            },
            // 40*F
            ff() {
                let ff = this.list.filter(f => {
                    return f.ef === 'F' && f.containerSize === '40'
                })
                return ff.length
            },
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    // this.$parent.dialogForm = false
                }
            }
        }
    }
</script>

<style scoped>

</style>
